<template>
  <div>
    <el-table v-loading="loading" :height="height" :header-cell-style="headerStyle"
              :max-height="maxHeight"
              @selection-change="handleSelectionChange"
              @select="rowSelectChange"
              @select-all="selectAllChange"
              :summary-method="summaryMethod"
              :span-method="spanMethod"
              :lazy="lazy"
              :expand-row-keys="expandRowsKeys"
              :load="treeLoad"
              :show-summary="isShowSummary"
              :data="tableData" :row-key="rowKey" :border="border" ref="table">
      <el-table-column v-if="selection" width="55" type="selection" align="center"></el-table-column>
      <slot name="first"/>
      <!--
          isHide 是否隐藏
      -->
      <el-table-column v-for="item  in tableColumn" v-if="!item.isHide" :prop="item.prop" :label="item.label"
                       :min-width="item.minWidth"
                       :key="item.prop" :align="item.align ? item.align : 'center'" :width="item.width"
                       :fixed="item.fixed">
        <template slot="header" slot-scope="{column}">
          {{ column.label }} <span v-if="item.headerTips">
          <el-tooltip class="item" effect="dark" :content="item.headerTips" placement="top">
              <i class="el-icon-info"></i>
       </el-tooltip>
        </span>
        </template>
        <template slot-scope="scoped">
          <!--            组件化内容-->
          <div v-if="item.component">
            <component :is="item.component" :rows="scoped.row[item.prop]"></component>
          </div>
          <!--          渲染html格式内容-->
          <div v-else-if="item.isHtml" v-html="scoped.row[item.prop]"></div>
          <!--           插槽内容 指定slot-->
          <template v-else-if="item.slot">
            <slot :name="item.slot" v-bind="scoped"/>
          </template>
          <div v-else>{{ scoped.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <slot/>
      <slot name="operate"></slot>
    </el-table>
    <el-row v-if="page" style="text-align: center;margin-top: 10px">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="10"
          :page-sizes="[10, 30, 50, 100,200]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>

export default {
  props: {
    tableData: {
      type: Array,
    },
    tableColumn: {
      type: Array
    },
    rowKey: {
      type: String,
    },
    page: {
      default: function () {
        return {
          page: 1,
          pageSize: 10,
          total: 0
        }
      }
    },
    maxHeight: {},
    loading: {
      type: Boolean,
      default: false
    },
    height: {
      type: String
    },
    border: {
      type: Boolean,
      default: false
    },
    selection: {
      default: false
    },
    selectRows: {
      type: Array
    },
    headerStyle: {
      default: function () {
        return {
          backgroundColor: '#EFF6F9'
        }
      }
    },
    isShowSummary: Boolean,
    summaryMethod: {},
    spanMethod: {},
    lazy: {
      default: false,
      type: Boolean
    },
    treeLoad: {
      type: Function,
    },
    expandRowsKeys: {
      type: Array
    }
  },
  watch: {
    selectRows: {
      handler(val) {
        if (val.length === 0) {
          this.clearSelection()
        }
      }
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
    handleSelectionChange(value) {
      this.$emit('handleSelectionChange', value)
    },
    clearSelection() {
      this.$refs.table.clearSelection()
    },
    rowSelectChange(selection, row) {
      this.$emit('rowSelectChange', selection, row)
    },
    selectAllChange(selection) {
      this.$emit('selectAllChange', selection)
    }
  },
}
</script>

<style lang="less" scoped>
.table {
  width: 100%;
}
</style>
